<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatMallLinkComponent/>
    </div>

    <!-- 页面主体 -->
    <div class="main-container">
      <div class="nav-breadcrumb">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" style="font-size: 16px;">
          <el-breadcrumb-item :to="{ path: '/mall' }">商城</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/mall' }"><span v-text="sameCommodity.type">Xxx</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 相同商品列表 -->

      <ul class="pro-itmes g-wrap g-flex" v-for="index of (Math.ceil(sameCommodityList.length / 4))">
        <li v-for="item in sameCommodityList.slice((index - 1) * 4, (index - 1) * 4 + 4)" :key="item.id">
          <a :href="'/mall/commodity'" target="_blank">
            <img class="pro-img" :src='item.coverUrl'>
            <div class="g-p10">
              <div class="g-txtcut g-font16 g-m5-b">{{ item.title }}</div>
              <div class="g-c-9 g-font14 g-onecut g-m5-b">{{ item.keywords }}</div>
              <div class="price">{{ item.salePrice }}</div>
            </div>
          </a>
        </li>
      </ul>
      <div>

      </div>
      <div class="g-m10-bt g-flex g-flex-cnt" v-if="this.nowPageNum==0">
        <a class="page-d" @click=addPageNum()>下一页</a>
      </div>
      <div class="g-m10-bt g-flex g-flex-cnt" v-else="this.nowPageNum!=0">
        <a class="page-u" @click=subPageNum()>上一页</a>
        <a class="page-d g-l-15" @click=addPageNum()>下一页</a>
      </div>
      <div class="g-center g-p10 nc-join g-b-r10 g-b-f">
        <div class="g-font20 g-font-b g-m15-b">学茶网合作伙伴</div>
        <img src="/images/ncw-pc-join.jpg"/>
      </div>
    </div>
  </div>

</template>

<script>
import FloatMallLinkComponent from '@/components/FloatMallLinkComponentView.vue';

export default {
  components: {
    FloatMallLinkComponent
  },
  data() {
    return {
      pageTitle: '',
      nowPageNum: 1,
      sameCommodity: {
        type: '绿茶'
      },
      sameCommodityList: [
        {
          id: 1,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 2,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 3,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 4,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 5,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 6,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 7,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
        {
          id: 8,
          categoryId: 2,
          categoryName: "绿茶",
          barCode: "11010101110001",
          title: "2023年明前特级信阳毛尖绿茶 250克（125g*2罐）",
          brief: "细、圆、紧、直 鲜爽持久",
          coverUrl: '/images/20220214_77F422921B0285DCF3DC1BE2FCB6D202.jpg',
          salePrice: 216,
          keywords: "绿茶,毛尖,信阳毛尖",
          sort: 0,
          isRecommend: 1,
          isPutOn: 1,
          salesCount: 0,
          commentCount: 0,
          positiveCommentCount: 0,
          negativeCommentCount: 0
        },
      ]
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶商城 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '大红袍';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadSearchSuggestKeywords() {
      let searchSuggestKeywords = ['车载杯', '煮茶壶', '铁观音', '五宝茶', '小青柑', '苦荞茶'];
      this.searchSuggestKeywords = searchSuggestKeywords;
    },
    addPageNum() {
      this.nowPageNum += 1;
    },
    subPageNum() {
      this.nowPageNum -= 1;
    }


  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadSearchSuggestKeywords();

  },
  created() {

  }
}
</script>

<style>
a {
  color: #000000;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.main-container {
  width: 1200px;
  margin: 0 auto;
}

.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.nav-breadcrumb {
  margin: 10px 0;
}

.g-b-f {
  background: #fff;
}

.g-m10-bt {
  margin: 10px 0;
}

.g-font16 {
  font-size: 16px;
}

.g-m15-b {
  margin-bottom: 15px;
}

.g-c-9 {
  color: #999;
}

.g-font14 {
  font-size: 14px;
}

.g-wrap {
  flex-flow: wrap;
}

.g-flex {
  display: flex;
}

.g-b-r10 {
  border-radius: 10px;
}

.g-font-b {
  font-weight: 700;
}

.g-font20 {
  font-size: 20px;
}

.pro-itmes li {
  text-align: left;
  width: 275px;
  height: 390px;
  background: #fff;
  box-sizing: border-box;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  margin: 0 25px 30px 0;
  padding: 25px;
}

.pro-img {
  width: 230px;
  height: 230px;
  background: #f5f5f5;
}

.g-txtcut {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.g-onecut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.price {
  color: #ff5000;
  font-size: 17px;
}

.price::before {
  content: "¥";
  margin-right: 5px;
  font-size: 14px;
  font-weight: 400;
}

.g-flex-cnt {
  justify-content: center;
}

.page-d, .page-u {
  background: #fff;
  height: 50px;
  line-height: 50px;
  width: 300px;
  display: block;
  border-radius: 20px;
  text-align: center;
  color: #666;
  -webkit-transition: all .15s linear;
  transition: all .15s linear;
}

.page-d:hover, .page-u:hover {
  background: #44B549;
  color: #fff;
}

.nc-join {
  margin: 50px 0 20px;
}

.nc-join img {
  display: block;
  border: none;
  width: 100%;
}

.g-l-15 {
  margin-left: 15px;
}
</style>
